<template>
  <div class="wrapper">
    <div class="menu-cointainer">
      <a-row  :gutter="16" class="guide">
        <a-col :span="8">
        	<span class="title">运维控制平台</span>
        </a-col>
	   <a-col :span="15">
        	<div  class="number">{{onlineSum}} 人在线</div>
        	<div  class="number">累计访问量：{{accessCount}}</div>
         </a-col>
	   <a-col :span="1" style="text-align:right">
        	<a-badge>
              <a @click="exit">
                <a-icon type="poweroff" class="home" />
              </a>
            </a-badge>
         </a-col>
      </a-row>
      <a-row  :gutter="16" class="mgt20">
      	    <a-card title="常用应用" class="card-app">
      	    		<span slot="extra">总应用数：{{totalApp}}<!-- &nbsp;&nbsp;&nbsp;&nbsp;在线应用：9 --></span>
      	    		<a-col class="gutter-row" :span="22">
      	    		  <a-row  :gutter="16">
      	    		  		<a-col class="gutter-row" :span="8" v-for="(item, index) of appArray" :key='index'>
      	    		  			<router-link :to="{path:'/dataManage/dashboard',query:{system:'数据管理'}}" v-if="item.sysCode==='S002'">
			      	   			<div :class="setClass(index)" @click="gotoMenu(item)">
									<a-icon :type="item.icon"/>
									<p>{{item.sysName}}</p>
								</div>
							 </router-link>
							 <router-link :to="{path:'/businessManage/dashboard',query:{system:'业务管理'}}" v-else-if="item.sysCode==='S001'">
			      	   			<div :class="setClass(index)" @click="gotoMenu(item)">
									<a-icon :type="item.icon"/>
									<p>{{item.sysName}}</p>
								</div>
							 </router-link>
							  <router-link :to="{path:'/permissionManage/dashboard',query:{system:'权限管理'}}" v-else-if="item.sysCode==='S000' && isManager('S000')">
			      	   			<div :class="setClass(index)" @click="gotoMenu(item)">
									<a-icon :type="item.icon"/>
									<p>{{item.sysName}}</p>
								</div>
							 </router-link>

							  <a  target="_self" v-else>
			      	   			<div :class="setClass(index)" @click="gotoNext(item)">
									<a-icon :type="item.icon"/>
									<p>{{item.sysName}}</p>
								</div>
							 </a>
		      	   		 </a-col>
	      	   		</a-row>
      	   		</a-col>
      	   		<a-col class="gutter-row" :span="2">
      	   			<a-button class="more"  type="primary" ghost @click="moreApp" v-if="totalApp>6">查看更多</a-button>
      	   		</a-col>
		    </a-card>
      </a-row>
      <a-row  :gutter="16" class="mgt20">
          <a-col class="gutter-row" :span="12" style="padding-left:0">
            	<a-card class="chart">
		     		<zhhy-chart></zhhy-chart>
		     </a-card>
		</a-col>
		<a-col class="gutter-row" :span="12" style="padding-right:0">
            	<a-card class="chart">
		     		<xtrd-chart></xtrd-chart>
		     </a-card>
		</a-col>
      </a-row>
    </div>
    <modal
      :title="modalTitle"
      :visible="modalVisible"
      @ok="handleOk"
      @cancel="handleCancel"
    ></modal>
  </div>
</template>

<script>
import ZHHYchart from './components/ZHHYchart'
import XTRDchart from './components/XTRDchart'
import {GETTOPSIXAPP,GETTOTALAPP,GETACCESSCOUNT,GETONLINEUSER,COUNTACCESS} from '@/../static/js/apis.js'
import modal from './components/appModal';
import global from "@/../static/global.vue"
export default {
  name: 'portal',
  components:{
  	zhhyChart: ZHHYchart,
  	xtrdChart: XTRDchart,
  	modal
  },
  computed: {
    // isManager (value) {
    //   return global.isManager(value)
    // }
  },
  data () {
    return {
      modalTitle: '更多应用',
      modalVisible: false,
      appArray:[],
      totalApp:'',
      accessCount:'',
      onlineSum:''
    }
  },

  methods: {
    isManager (value) {
      return global.isManager(value)
    },
     /*获取静态数据*/
    getStaticData() {
        let self = this
        GETTOPSIXAPP('', function (res) {
        	self.appArray=res.data
        })
        GETTOTALAPP('', function (res) {
        	self.totalApp=res.data
        })
        GETACCESSCOUNT('', function (res) {
        	self.accessCount=res.data
        })
         GETONLINEUSER('', function (res) {
        	self.onlineSum=res.data
        })
    },
    setClass(value){
         let obj={numberCard:true}
         obj["color"+value]=true
         return obj
    },
    gotoMenu(item){
       COUNTACCESS({sysCode:item.sysCode}, function (res) {

        })
      this.$store.commit('changeFirstNavSelected', '0')
     },
    gotodaohang(item){
      console.log(1)
      COUNTACCESS({sysCode:item.sysCode}, function (res) {

      })
      window.location.href ="http://10.16.50.172/api/dev/service-api/guide/route/driving?token="+localStorage.getItem("token")
    },
     gotoNext(item){
	  COUNTACCESS({sysCode:item.sysCode}, function (res) {

        })
       if (item.url.indexOf('?') > -1) {
         var url2 = item.url + '&token=' + localStorage.getItem('token')
         console.log(url2)
         window.open(url2,'_blank')
         //window.location.href = url2 //item.url + '&token=' + localStorage.getItem('token')
       } else {
         let url3 = item.url + '?token=' + localStorage.getItem('token')
         //console.log(url3)
         window.open(url3,'_blank');//window.location.href = url3 // item.url + '?token=' + localStorage.getItem('token')
       }
     },
     setCookie(name, value, seconds){
         seconds = seconds || 0;   //seconds有值就直接赋值，没有为0
        var expires = "";
        if (seconds != 0) {      //设置cookie生存时间
            var date = new Date();
            date.setTime(date.getTime() + (seconds * 1000));
            expires = "; expires=" + date.toGMTString();
        }
        document.cookie = name + "=" + escape(value) + expires + "; path=/";   //转码并赋值
    },
     exit(){
     	     this.setCookie("token", "", -1);
		window.location.href= global.verifyUrl+"/logout?ReturnUrl=" + window.location.href
     },
  /* modal确定事件 */
    handleOk (e) {
      this.modalVisible = false
    },
    /* modal取消事件 */
    handleCancel (e) {
      this.modalVisible = false
    },
    moreApp(){
    	 this.modalVisible = true
    }
  },
  created () {
    this.getStaticData()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper {
  background: #f0f2f5;
  height: 100vh
}
.guide{
	height: 2.5rem;
	line-height: 2.5rem
}
 .title{
 	font-size: 2.5rem;
 	color: #1890ff;
     text-shadow: 1px 1px 1px #03a9f4;
 	font-weight: bold;
 }
 .number{
 	text-align: right;
 	height: 1.2rem;
 	line-height: 1.2rem;
 	color: #333;

 }
 .home{
 	color: #1890ff;
 	font-size: 24px;
 }
.menu-cointainer {
  width: 60%;
  margin: 0 auto;
  padding-top: 2rem;
}
.mgt20{
	margin-top: 20px
}
/deep/.card-app .ant-card-body{
	padding-bottom: 0!important
}
/deep/.chart .ant-card-body{
	padding-bottom: 0!important
}
.numberCard{
	height:160px;
	color:white;
	border-radius:3px;
	line-height:180px;
	margin-bottom: 20px;
}
.color0{
	background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
}
.color1{
	background-image: linear-gradient( 135deg, #FCCF31 10%, #F55555 100%);
}
.color2{
	background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
}
.color3{
	background-image: linear-gradient( 135deg, #69FF97 10%, #00E4FF 100%);
}
.color4{
	background-image: linear-gradient( 135deg, #FF6FD8 10%, #3813C2 100%);
}
.color5{
	background-image: linear-gradient( 135deg, #2AFADF 10%, #4C83FF 100%);
}
.numberCard i{
	font-size:72px;
	margin-left:2rem
}
.numberCard p{
	display: inline-block;
	font-size:24px;
	margin-left:10px;
}
.more{
	height: 340px;
	width: 50px;
	float: right;
	white-space:normal;
}
</style>
